<template>
  <div class="ci-wrap">
    <van-nav-bar title="头像修改"
                 right-text="确认"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <div class="current-icon">
      <img :src="imgURL" />
      <van-uploader class="icon-uploader"
                    v-model="fileList"
                    multiple
                    :max-count="1" />
    </div>
  </div>
</template>
<script>
import { ref, getCurrentInstance } from 'vue'
import { Toast } from 'vant'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const fileList = ref([])
    const imgURL =
      'https://tse4-mm.cn.bing.net/th/id/OIP.q9wT3J3sd1ajXEKu9NzpAgDMEy?pid=ImgDet&rs=1'
    function onClickLeft () {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push('/userInfo')
    }
    function onClickRight () {
      this.$axios.user.changeIcon(this.imgURL).then((res) => {
        if (res.status === 200) {
          Toast.success('提交成功')
        }
      })
    }
    return {
      fileList,
      imgURL,
      onClickLeft,
      onClickRight
    }
  }
}
</script>
<style lang="scss" scoped>
.current-icon {
  margin: 20px auto;
  width: 300px;
  height: 300px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
